<template>
  <div class="layout" :class="layoutClass || ''">
    <div class="left-width mr-2 overflow-hidden" v-if="hasLeftSlot">
      <slot name="left"></slot>
      <!-- 左侧树 -->
    </div>
    <div
      class="p-3 bg-color"
      :class="[hasLeftSlot ? 'right-width' : 'full-width']"
      v-if="hasRightSlot"
    >
      <slot name="search"></slot>
      <!-- 搜索栏 -->
      <SearchBox
        v-if="hasSearchSlot"
        :searchConfig="props.searchConfig"
        @search="search"
        @scroll-height="$emit('scrollHeight')"
      />
      <div v-if="hasOperationSlot || props.title" class="node-box">
        <NodeHead v-if="props.title" class="mb-3 mt-3" :nodeName="props.title" />
        <slot name="operation"></slot>
        <!-- 搜索下操作按钮 -->
      </div>

      <slot name="right"></slot>
      <!-- 右边 table列表 -->
    </div>
    <div v-if="hasFullSlot" :class="hasLeftSlot ? 'right-width' : 'full-width'">
      <slot name="full"></slot>
      <!-- 列表<无搜索、按钮> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, useSlots } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import SearchBox from './WorkflowSearchBox.vue';
  const props = defineProps(['title', 'searchConfig', 'layoutClass']);
  const emits = defineEmits(['search', 'scrollHeight']);
  const hasLeftSlot = computed(() => {
    return !!useSlots().left;
  });
  const hasSearchSlot = computed(() => {
    return !!useSlots().search;
  });
  const hasOperationSlot = computed(() => {
    return !!useSlots().operation;
  });
  const hasRightSlot = computed(() => {
    return !!useSlots().right;
  });
  const hasFullSlot = computed(() => {
    return !!useSlots().full;
  });
  function search(params: any) {
    emits('search', params);
  }
</script>
<style lang="less" scoped>
  .layout {
    display: flex;
    height: 100%;
    padding: 10px;
  }

  .left-width {
    flex-basis: 20%;
  }

  .right-width {
    flex-basis: 80%;
  }

  .full-width {
    flex-basis: 100%;
  }

  .bg-color {
    background-color: #fff;
  }

  .node-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
  }

  :deep(.button-box) {
    button {
      margin-right: 6px;
    }
  }
  // 操作列

  :deep(.delete-icon) {
    cursor: pointer;
    color: @clear-color;
  }

  :deep(.edit-icon) {
    cursor: pointer;
    color: @primary-color;
    margin-right: 10px;
  }

  // 左侧树结构样式
  :deep(.vben-tree-header) {
    height: 40px;
    border-bottom: 1px solid #f1f1f1;
  }

  :deep(.ant-tree) {
    padding: 0;
    margin-top: 10px;
    border-top: 0;
    color: #666;
  }

  :deep(.ant-tree-switcher) {
    width: 0;
  }

  :deep(.ant-tree-title .anticon) {
    padding-left: 10px;
  }

  :deep(.ant-tree .ant-tree-treenode) {
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 表
  :deep(.ant-table-pagination.ant-pagination) {
    position: fixed;
    bottom: 10px;
    right: 30px;
  }
</style>
<style>
  html[data-theme='dark'] {
    .bg-color {
      background-color: #151515 !important;
    }
  }
</style>
